<template>
  <j-modal
    width="60%"
    title="选择图片"
    :visible="visible"
    @cancel="close"
    @ok="handleOk">
    <a-input-search style="width: 50%" placeholder="请输入图片名称" v-model="queryParam.keyword"
                    @search="loadData(1)"></a-input-search>
    <a-spin :spinning="loading">
      <a-row>
        <a-col class="item" :span="4" v-for="(item) in dataSource" @click="checkItem(item.materialUrl)">
          <div class="item-img-container">
            <img class="item-img" :src="item.materialUrl">
          </div>
          <div class="item-name">{{item.keyword}}</div>
          <a-radio class="item-radio" :checked="checkedUrl===item.materialUrl"></a-radio>
        </a-col>
      </a-row>
    </a-spin>
    <a-pagination @change="loadData" style="text-align: right" v-model="ipagination.current" :total="ipagination.total"
                  show-less-items></a-pagination>
  </j-modal>
</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'

  export default {
    name: "MaterialListModel",
    mixins: [JeecgListMixin],
    data() {
      return {
        visible: false,
        checkedUrl: '',
        queryParam: {
          materialType: 1
        },
        url: {
          list: 'materia/crdMaterialInfo/list'
        }
      }
    },
    methods: {
      show() {
        this.visible = true;
      },
      close() {
        this.visible = false;
      },
      checkItem(url) {
        this.checkedUrl = url;
      },
      handleOk() {
        if (this.checkedUrl) {
          this.$emit('checkedUrl', this.checkedUrl);
        }
        this.close()
      },
      getQueryField() {
        return ''
      },
    }
  }
</script>

<style scoped lang="less">
  .item {
    position: relative;
    margin: 5px;
    overflow: hidden;

    &-img {
      width: 100%;
      max-height: 120px;

      &-container {
        display: flex;
        align-items: center;
        width: 100%;
        height: 120px;
        border: 1px dotted #ededed;
        background-color: rgba(153, 153, 153, 0.13);
      }
    }

    &-name {
      text-align: center;
    }

    &-radio {
      position: absolute;
      top: 5px;
      left: 10px;
    }
  }

</style>